<template>
  <div id="allmap">
    <div id="map"></div>

    <!-- 图例 -->
    <div class="person_legend" v-if="showLegend">
      <h3>
        图例
        <i class="iconfont icon-shanchu" @click="showLegend = false"></i>
      </h3>
      <p>
        <span>
          <img :src="legend.legend1" alt />
        </span>
        <span style="font-size: 12px">窗口地区</span>
      </p>
      <p>
        <span>
          <img :src="legend.legend2" alt />
        </span>
        <span style="font-size: 12px">打卡地</span>
      </p>
      <p>
        <span>
          <img :src="legend.legend3" alt />
        </span>
        <span style="font-size: 12px">重点商圈</span>
      </p>
      <p>
        <span>
          <img :src="legend.legend4" alt />
        </span>
        <span style="font-size: 12px">红色教育场馆</span>
      </p>
      <p>
        <span>
          <img :src="legend.legend5" alt />
        </span>
        <span style="font-size: 12px">保障酒店</span>
      </p>
      <p>
        <span>
          <img :src="legend.legend6" alt />
        </span>
        <span style="font-size: 12px">展演场馆</span>
      </p>
      <p>
        <span>
          <img :src="legend.legend7" alt />
        </span>
        <span style="font-size: 12px">大气污染防治重点点位</span>
      </p>
      <p>
        <span>
          <img :src="legend.legend8" alt />
        </span>
        <span style="font-size: 12px">政府周边</span>
      </p>
    </div>
    <el-button
      style="position: absolute; right: 162px; top: 25px"
      size="mini"
      type="primary"
      @click="changeCursor('1')"
      v-if="!isFull"
      icon="el-icon-circle-plus"
      >新增热点地区</el-button
    >
    <el-button
      style="position: absolute; right: 15px; top: 25px"
      size="mini"
      type="primary"
      @click="changeCursor('2')"
      v-if="!isFull"
      icon="el-icon-question"
      >新增问题点位</el-button
    >
    <el-button
      style="position: absolute; right: 15px; top: 25px"
      size="mini"
      type="primary"
      @click="changeCursor('0')"
      v-if="isFull"
      icon="el-icon-error"
      >取 消 新 增</el-button
    >
    <el-button
      style="position: absolute; right: 15px; top: 65px"
      size="mini"
      type="primary"
      @click="clickshowHotRanking()"
      icon="el-icon-s-flag"
      >热门点位统计</el-button
    >
    <!-- <el-button
      style="position: absolute; right: 0px; top: 25px"
      size="mini"
      type="primary"
      @click="onlyShowHeader()"
      icon="el-icon-circle-close"
      >隐藏其它</el-button
    > -->
    <!-- <el-button
      style="position: absolute; right: 122px; top: 25px"
      size="mini"
      type="primary"
      @click="requestFullScreen()"
      v-if="!isFull"
      icon="el-icon-full-screen"
      >全屏</el-button
    > -->
    <!-- <el-button
      style="position: absolute; right: 122px; top: 25px"
      size="mini"
      type="primary"
      @click="exitFullscreen()"
      v-else
      icon="el-icon-full-screen"
      >退出全屏</el-button
    > -->
    <!-- 正上方显示隐藏图标操作栏,多选 -->
    <div class="map-operation">
      <ul>
        <li
          v-for="(item, index) in mapOperationsList"
          :class="{ active: item.active }"
          :key="index"
          @click="changeOperationValue(item, index)"
        >
          <i :class="item.icon"></i>
          {{ item.name }}
        </li>
      </ul>
    </div>

    <!-- 左下角 列表展开按钮-->
    <!-- <div class="mini_legend" v-if="hideFooter" @click="showFooter()">
      设施信息列表
    </div> -->
    <!-- 右下角 图例展开按钮-->
    <div
      class="mini_legend right"
      v-if="!showLegend"
      @click="showLegend = !showLegend"
    >
      图例
    </div>

    <!-- 新增热点地区 -->
    <el-dialog
      title="新增热点地区"
      :visible.sync="showAddHeatPoint"
      width="1000px"
    >
      <el-form ref="form" :model="formHeat" label-width="7.729vw" class="flex">
        <el-form-item label="地区名称：">
          <el-input
            v-model="formHeat.NAME"
            placeholder="请输入地区名称"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="地区类型：">
          <el-select v-model="formHeat.TYPE" placeholder="请选择地区类型">
            <el-option
              v-for="item in typeList"
              :key="item.typeindex"
              :label="item.typetitle"
              :value="item.typeindex"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经度：">
          <el-input
            v-model="formHeat.lng"
            placeholder="请输入经度"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="使用纬度：">
          <el-input
            v-model="formHeat.lat"
            placeholder="请输入纬度"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属行政区：">
          <el-input
            disabled
            v-model="formHeat.ClientName"
            placeholder="请输入所属行政区"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddHeatPoint = false">取 消</el-button>
        <el-button type="primary" @click="saveHotpointRL()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑热点地区 -->
    <el-dialog
      title="编辑热点地区"
      :visible.sync="showEditHeatPoint"
      width="1000px"
      :before-close="getHotpointOnMap"
    >
      <el-form ref="form" :model="formHeat" label-width="7.729vw" class="flex">
        <el-form-item label="地区名称：">
          <el-input
            v-model="formHeat.热点地区名称"
            placeholder="请输入地区名称"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="地区类型：">
          <el-select v-model="formHeat.TYPE" placeholder="请选择地区类型">
            <el-option
              v-for="item in typeList"
              :key="item.typeindex"
              :label="item.typetitle"
              :value="item.typeindex"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经度：">
          <el-input
            v-model="formHeat.经度"
            placeholder="请输入经度"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="纬度：">
          <el-input
            v-model="formHeat.纬度"
            placeholder="请输入纬度"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属行政区：">
          <el-input
            disabled
            v-model="formHeat.所属行政区划"
            placeholder="请输入所属行政区"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showEditHeatPoint = false">取 消</el-button>
        <el-button type="primary" @click="editHotpointRL()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增问题点位 -->
    <el-dialog
      title="新增问题点位"
      :visible.sync="showAddQuestionPoint"
      width="1000px"
    >
      <el-form ref="form" :model="formHeat" label-width="7.729vw" class="flex">
        <el-form-item label="问题名称：">
          <el-input
            v-model="formQuestion.SYMBOL"
            placeholder="请输入问题名称"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="经度：">
          <el-input
            v-model="formQuestion.lng"
            placeholder="请输入经度"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="使用纬度：">
          <el-input
            v-model="formQuestion.lat"
            placeholder="请输入纬度"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属行政区：">
          <el-input
            disabled
            v-model="formQuestion.ClientName"
            placeholder="请输入所属行政区"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="问题详细：" style="height: 80px">
          <el-input
            type="textarea"
            :rows="3"
            v-model="formQuestion.DETAIL"
            placeholder="请输入"
            class="handle-input mr10"
            style="width: 15.5vw; border: 1px solid #a4aca7"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="问题图片：">
          <el-button size="mini" type="success" @click="clickWXFJ">
            <span v-if="this.WXFJUrl">重新上传</span>
            <span v-else>上传图片</span>
          </el-button>
          <span style="margin-left: 50px" v-if="this.WXFJUrl">{{
            this.WXFJUrl
          }}</span>
          <span style="margin-left: 50px" v-else>{{ formQuestion.PHOTO }}</span>
          <input
            type="file"
            ref="WXFJFile"
            style="display: none"
            accept="image/gif, image/jpeg"
            @change="changeWXFJ"
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddQuestionPoint = false">取 消</el-button>
        <el-button type="primary" @click="saveMatterpointRL()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑问题点位 -->
    <el-dialog
      title="编辑问题点位"
      :visible.sync="showEditQuestionPoint"
      width="1000px"
    >
      <el-form ref="form" :model="formHeat" label-width="7.729vw" class="flex">
        <el-form-item label="问题名称：">
          <el-input
            v-model="formQuestion.问题名称"
            placeholder="请输入问题名称"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="经度：">
          <el-input
            v-model="formQuestion.经度"
            placeholder="请输入经度"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="使用纬度：">
          <el-input
            v-model="formQuestion.纬度"
            placeholder="请输入纬度"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属行政区：">
          <el-input
            disabled
            v-model="formQuestion.所属行政区划"
            placeholder="请输入所属行政区"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="问题详细：" style="height: 80px">
          <el-input
            type="textarea"
            :rows="3"
            v-model="formQuestion.问题详细描述"
            placeholder="请输入"
            class="handle-input mr10"
            style="width: 15.5vw; border: 1px solid #a4aca7"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="问题图片：">
          <el-button size="mini" type="success" @click="clickWXFJ">
            <span v-if="this.WXFJUrl">重新上传</span>
            <span v-else>上传图片</span>
          </el-button>
          <span style="margin-left: 50px" v-if="this.WXFJUrl">{{
            this.WXFJUrl
          }}</span>
          <span style="margin-left: 50px" v-else>{{
            formQuestion.问题图片
          }}</span>
          <input
            type="file"
            ref="WXFJFile"
            style="display: none"
            accept="image/gif, image/jpeg"
            @change="changeWXFJ"
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showEditQuestionPoint = false">取 消</el-button>
        <el-button type="primary" @click="editMatterpointRL()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 热点地区列表 -->

    <el-dialog title="热点地区列表" :visible.sync="showHotList" width="1000px">
      <el-table :data="Data.hotList" border height="400">
        <el-table-column
          prop="热点地区名称"
          label="热点地区名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="热点地区类型"
          label="热点地区类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="所属行政区划"
          label="所属行政区划"
          align="center"
        ></el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleHotpointRL(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              @click="deleteHotpointRL(scope.$index, scope.row)"
              style="color: red"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 问题点位列表 -->
    <el-dialog
      title="问题点位列表"
      :visible.sync="showQuestionList"
      width="1000px"
    >
      <el-table :data="Data.questionList" border height="400">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="expand">
              <el-form-item label="问题详细描述:">
                <span>{{ props.row.问题详细描述 }}</span>
              </el-form-item>
              <el-form-item label="">
                <span></span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="问题名称"
          label="问题名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="所属行政区划"
          label="所属行政区划"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="问题详细描述"
          label="问题详细"
          align="center"
        ></el-table-column>
        <el-table-column label="问题图片" width="100px" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 45px; height: 45px; margin-top: 5px"
              :src="scope.row.问题图片"
              @click="bigImage(scope.row)"
            >
              <div slot="error" class="image-slot" style="margin-top: 10px">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="上传时间"
          label="上传时间"
          align="center"
        ></el-table-column>
        <el-table-column
          v-if="isBJQuestionList"
          prop="上传时间"
          label="状态"
          :formatter="formatterBJType"
          align="center"
        ></el-table-column>
        <el-table-column
          v-if="!isBJQuestionList"
          label="操作"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleMatterpointRL(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              style="color: orange"
              @click="stateMatterpointRL(scope.$index, scope.row)"
              >结案</el-button
            >
            <el-button
              type="text"
              style="color: red"
              @click="deleteMatterpointRL(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 问题点位排名 -->
    <el-dialog
      title="问题点位排名"
      :visible.sync="showQuestionRanking"
      width="600px"
    >
      <el-table :data="Data.questionRanking" border height="400">
        <el-table-column
          prop="行政区划"
          label="行政区划"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="问题点位数量"
          label="问题点位数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="排名"
          label="排名"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 图片放大 -->
    <el-dialog
      title="图片展示"
      :visible.sync="showBigDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-image style="width: 100%; height: 100%" :src="srcBig"></el-image>
    </el-dialog>
    <!-- 热门点位统计 -->
    <el-dialog
      title="热门点位统计"
      :visible.sync="showHotRanking"
      width="600px"
    >
      <div style="padding-bottom: 20px">
        <span>行政区域：</span>
        <el-select
          @change="getHotpointStatisticsRL"
          style="width: 150px"
          v-model="valueClientRL"
          placeholder="请选择行政区域"
        >
          <el-option
            v-for="item in clientRL"
            :key="item.CLIENT_NO"
            :label="item.CLIENT_NAME"
            :value="item.CLIENT_NO"
          >
          </el-option>
        </el-select>
      </div>
      <el-table :data="Data.hotRanking" border height="400">
        <el-table-column
          prop="热点地区类型"
          label="热点地区类型"
          align="center"
          width="350"
        ></el-table-column>
        <el-table-column
          prop="数量"
          label="数量"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>

import imgMarker1 from '@/assets/img/marker/hotPoint/1B.png'
import imgMarker2 from '@/assets/img/marker/hotPoint/2B.png'
import imgMarker3 from '@/assets/img/marker/hotPoint/3B.png'
import imgMarker4 from '@/assets/img/marker/hotPoint/4B.png'
import imgMarker5 from '@/assets/img/marker/hotPoint/5B.png'
import imgMarker6 from '@/assets/img/marker/hotPoint/6B.png'
import imgMarker7 from '@/assets/img/marker/hotPoint/7B.png'
import imgMarker8 from '@/assets/img/marker/hotPoint/8B.png'
import eventBus from '@/eventBus.js'
import { newMap } from '@/common/js/map.js'
import OSS from 'ali-oss';
export default {
  data () {
    return {
      isClickMarker: false,
      districtData: [],
      formHeat: {},
      formQuestion: {},
      QuestionPhoto: {
        imageList: []
      },
      hotpointRLTitle: '',
      showHotRanking: false,
      showAddHeatPoint: false,
      showAddQuestionPoint: false,
      showEditHeatPoint: false,
      showEditQuestionPoint: false,
      showHotList: false,
      showQuestionList: false,
      isBJQuestionList: false,
      showQuestionRanking: false,
      addState: 0,
      // MouseEvent: {
      //   top: 0,
      //   left: 0,
      //   isShow: false
      // },
      isFull: false,
      map: null,
      mapZoom: 16,
      isZoomChange: 'S',
      // 班组区域
      // groupPolygon: null,
      // cleanerPolygon: null,
      // status: {},
      legend: {
        legend1: imgMarker1,
        legend2: imgMarker2,
        legend3: imgMarker3,
        legend4: imgMarker4,
        legend5: imgMarker5,
        legend6: imgMarker6,
        legend7: imgMarker7,
        legend8: imgMarker8,
      },
      MapOverlay: {
        arrayWaterMapOverlay: [],
      },
      Data: {
        hotList: [],
        questionList: [],
        questionRanking: [],
        arrayName: [],
        arrayHotpointForMap: [],
        arrayPolygon: [],
        hotRanking: [],
      },
      clientRL: [],
      valueClientRL: '',
      MapV: {
        dataSetDic: {},
        iconMapvDic: {},
        textMapvDic: {}
      },
      // warningNum: 0,
      // 筛选数据
      // screeningData: [],
      // hideFooter: false,
      showLegend: true,
      mapInfoTabs: [{
        icon: 'el-icon-truck'
      }, {
        icon: 'el-icon-collection-tag'
      }],
      mapInfoTabValue: 0,
      showMapInfo: true,
      mapOperationsSummary: [{
        name: '设施',
        icon: 'el-icon-house',
        num: 0,
        active: false
      }],
      mapOperationsList: [{
        name: '窗口地区',
        icon: 'el-icon-house',
        num: 0,
        active: true
      }, {
        name: '打卡地',
        icon: 'el-icon-picture-outline-round',
        num: 0,
        active: true
      }, {
        name: '重点商圈',
        icon: 'el-icon-goods',
        num: 0,
        active: true
      }, {
        name: '红色教育场馆',
        icon: 'el-icon-trophy',
        num: 0,
        active: true
      }, {
        name: '保障酒店',
        icon: 'el-icon-office-building',
        num: 0,
        active: true
      }, {
        name: '展演场馆',
        icon: 'el-icon-film',
        num: 0,
        active: true
      }, {
        name: '大气污染防治重点点位',
        icon: 'el-icon-price-tag',
        num: 0,
        active: true
      }, {
        name: '政府周边',
        icon: 'el-icon-s-flag',
        num: 0,
        active: true
      }],
      typeList: [{
        typetitle: '窗口地区',
        typeindex: '1'
      }, {
        typetitle: '打卡地',
        typeindex: '2'
      }, {
        typetitle: '重点商圈',
        typeindex: '3'
      }, {
        typetitle: '红色教育场馆',
        typeindex: '4'
      }, {
        typetitle: '保障酒店',
        typeindex: '5'
      }, {
        typetitle: '展演场馆',
        typeindex: '6'
      }, {
        typetitle: '大气污染防治重点点位',
        typeindex: '7'
      }, {
        typetitle: '政府周边',
        typeindex: '8'
      }],
      showBigDialogVisible: false,
      srcBig: '',
      //图片上传
      fileList: [],
      WXFJUrl: '', //存上传后的维修凭证照片url
      dataObj: {
        region: 'oss-cn-beijing',//我的存储是北京，可根据具体配置自行修改
        accessKeyId: 'LTAISI12uxTRFccz',
        accessKeySecret: 'cQAvLIZ9JizT5RXRNPBVcXfg3iURD8',
        bucket: 'photo-srw-hb2',
      }, //存签名信息
      baseAli: 'oss-cn-beijing.aliyuncs.com',
    }
  },
  destroyed () {
  },
  created () {
  },
  mounted () {
    this.valueClientRL = localStorage.getItem('CLIENT_NO')
    // 显示地图
    this.mapShow()
    this.getDistrictData()
    this.getHotpointOnMap()
    // this.getHotpointStatisticsRL()
    this.getClientListRL()
  },
  methods: {
    // 显示地图
    async mapShow () {
      // 百度地图API功能
      this.map = newMap();
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom(new BMap.Point(localStorage.getItem('MapCenterInfo_lng'), localStorage.getItem('MapCenterInfo_lat')), 10);
      const _this = this
      //缩放屏幕
      this.map.addEventListener('zoomend', function (e) {
        // console.log("地图缩放至：" + this.getZoom() + "级");
        // var aa = e.target.getZoom();
        if (e.target.getZoom() > 12 && _this.isZoomChange === 'S') {
          _this.isZoomChange = 'B';
          for (var key in _this.MapV.textMapvDic) {
            _this.MapV.textMapvDic[key].show();
          }
          _this.drawMapV()
          // _this.checkboxType()
        }
        if (e.target.getZoom() <= 12 && _this.isZoomChange === 'B') {
          _this.isZoomChange = 'S';
          for (var key1 in _this.MapV.textMapvDic) {
            _this.MapV.textMapvDic[key1].hide();
          }
          _this.drawMapV()
          // _this.checkboxType()
        }
      });
      this.map.addEventListener('click', function (e, target) {
        setTimeout(() => {
          if (_this.isClickMarker) {
            _this.isClickMarker = false
          } else {
            console.log('点击地图')
            _this.Data.arrayPolygon.forEach(overlay => {
              var result = BMapLib.GeoUtils.isPointInPolygon(e.point, overlay)
              if (result) {
                if (_this.addState == 1) {
                  _this.formHeat = {}
                  _this.showAddHeatPoint = true;
                  _this.formHeat.ClientName = overlay.name
                  _this.formHeat.lng = e.point.lng.toFixed(6)
                  _this.formHeat.lat = e.point.lat.toFixed(6)
                }
                if (_this.addState == 2) {
                  _this.formQuestion = {}
                  _this.showAddQuestionPoint = true;
                  _this.formQuestion.ClientName = overlay.name
                  _this.formQuestion.lng = e.point.lng.toFixed(6)
                  _this.formQuestion.lat = e.point.lat.toFixed(6)
                }
                if (_this.addState == 0) {
                  // console.log('点击某个行政区空白处，显示该地区热点地区与问题点位各自的数量，后面有【查看详情】按钮')
                  _this.getClientDistrictInfo(overlay.name, e.point)
                }
              }
            });
            // var geoc = new BMap.Geocoder();
            // geoc.getLocation(e.point, function (rs) {
            //   var name = rs.addressComponents.district;
            //   console.log('------' + name)
            //   if (_this.addState == 1) {
            //     _this.formHeat = {}
            //     _this.showAddHeatPoint = true;
            //     _this.formHeat.ClientName = name
            //     _this.formHeat.lng = e.point.lng.toFixed(6)
            //     _this.formHeat.lat = e.point.lat.toFixed(6)
            //   }
            //   if (_this.addState == 2) {
            //     _this.formQuestion = {}
            //     _this.showAddQuestionPoint = true;
            //     _this.formQuestion.ClientName = name
            //     _this.formQuestion.lng = e.point.lng.toFixed(6)
            //     _this.formQuestion.lat = e.point.lat.toFixed(6)
            //   }
            //   if (_this.addState == 0) {
            //     // console.log('点击某个行政区空白处，显示该地区热点地区与问题点位各自的数量，后面有【查看详情】按钮')
            //     _this.getClientDistrictInfo(name, e.point)
            //   }
            // })
          }
        }, 500)
      })
    },
    async getClientListRL () {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/Vehicle/GetClientListRL'
      const { data } = await this.$Http.get(url)
      this.clientRL = data
    },
    async getHotpointStatisticsRL () {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/Vehicle/GetHotpointStatisticsRL?ClientNo=' + this.valueClientRL
      const { data } = await this.$Http.get(url)
      this.Data.hotRanking = data
    },
    async getDistrictData () {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/Vehicle/GetDistrictInfoRL?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)

      var dataArr = []
      var points = []
      var districtName = data[0].行政区划
      this.districtData = data
      data.forEach(element => {
        if (element.行政区划 === districtName) {
          points.push(new BMap.Point(element.经度, element.纬度))
        } else {
          dataArr.push({ 'name': districtName, 'points': points })
          this.drawDistrictPolygon(districtName, points)
          points = []
          points.push(new BMap.Point(element.经度, element.纬度))
          districtName = element.行政区划
        }
      });
      this.drawDistrictPolygon(districtName, points)


      let dataSet = new mapv.DataSet(this.Data.arrayName);
      new mapv.baiduMapLayer(this.map, dataSet, {
        draw: 'text',
        size: 14,
        avoid: true, // 开启文本标注避让
        textBaseline: 'middle',
        // offset: { // 文本便宜值
        //   x: 0,
        //   y: 30
        // }
      })
    },
    drawDistrictPolygon (districtName, points) {
      console.log(districtName)
      var color = ''
      switch (districtName) {
        case '河西区':
          color = '#5acbed'
          break;
        case '南开区':
          // color = '#b05541'
          color = '#5d3494'
          break;
        case '和平区':
          color = '#5070ab'
          break;
        case '河东区':
          // color = '#5d3494'
          color = '#b05541'
          break;
        case '河北区':
          color = '#96925d'
          break;
        case '红桥区':
          color = '#a988eb'
          break;
        case '东丽区':
          color = '#5ac493'
          break;
        case '津南区':
          color = '#bd4877'
          break;
        case '西青区':
          color = '#70a64c'
          break;
        case '北辰区':
          color = '#f75ffa'
          break;
        case '蓟州区':
          color = '#f2ab8a'
          break;
        case '武清区':
          color = '#6cf255'
          break;
        case '静海区':
          color = '#764d82'
          break;
        case '宁河区':
          color = '#fae55c'
          break;
        case '宝坻区':
          color = '#ed9dcd'
          break;
        case '滨海新区':
          // color = '#c7f29b'
          color = '#FFA500'
          break;
        default:
          break;
      }
      var polygon = new BMap.Polygon(points, {
        strokeColor: 'rgba(58, 107, 219, 1)',
        strokeWeight: 3,
        // strokeStyle: 'dashed',
        fillColor: color + '99'
      })
      this.Data.arrayPolygon.push(polygon)
      // const _this = this
      // polygon.addEventListener('click', function (e, target) {
      //   console.log('点击模块')
      //   console.log(e)
      // })
      polygon.name = districtName
      this.map.addOverlay(polygon)
      var centerPolygon = polygon.getBounds().getCenter()
      this.Data.arrayName.push({
        geometry: {
          type: 'Point',
          coordinates: [centerPolygon.lng, centerPolygon.lat]
        },
        text: districtName
      });
    },
    async getClientDistrictInfo (ClientName, point) {
      let clientNO = this.districtData.filter(val => val.行政区划 == ClientName)[0].CLIENT_NO
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryHorizontalInfo?row0=0&column0=0&sqlName=&url=exec WebGetClientDistrictInfoNum '" + clientNO + "'"
      const { data } = await this.$Http.get(url)

      var opts = {
        width: 280,     // 信息窗口宽度
        height: 110,     // 信息窗口高度
        title: ClientName, // 信息窗口标题
      }


      var str = `<div style = "margin-bottom: 5px;" > 热点地区：${data[1][0]}<input type="button" id="hotDetail" style="margin: 0 15px;" value="查看详情"></div>
                    <div style="margin-bottom: 5px;">问题点位：${data[1][1]}<input type="button" id="matterDetail" style="margin: 0 15px;" value="查看详情"><input type="button" id="matterBJDetail" style="margin: 0 5px;" value="结案详情"></div>
                    <div style="margin-bottom: 5px;">问题排名：${data[1][2]}<input type="button" id="matterRanking" style="margin: 0 15px;" value="查看详情"></div>
      `
      var infoWindow = new BMap.InfoWindow(str, opts);  // 创建信息窗口对象 
      this.map.openInfoWindow(infoWindow, point)

      const _this = this
      setTimeout(() => {
        window.document.getElementById("hotDetail").addEventListener("click", function () {
          _this.getHotpointList(clientNO)
          _this.map.closeInfoWindow()
          // console.log('热点 查看详情')
        });
        window.document.getElementById("matterDetail").addEventListener("click", function () {
          _this.getQuestionList(clientNO)
          _this.map.closeInfoWindow()
          // console.log('问题 查看详情')
        });
        window.document.getElementById("matterBJDetail").addEventListener("click", function () {
          _this.getQuestionBJList(clientNO)
          _this.map.closeInfoWindow()
          // console.log('结案问题 查看详情')
        });
        window.document.getElementById("matterRanking").addEventListener("click", function () {
          _this.getQuestionRanking(clientNO)
          _this.map.closeInfoWindow()
          // console.log('问题 查看排名')
        });

      }, 500)
    },
    async getHotpointOnMap () {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/Vehicle/GetHotpointListRL?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      var list0 = []
      var list1 = []
      var list2 = []
      var list3 = []
      var list4 = []
      var list5 = []
      var list6 = []
      var list7 = []
      data.forEach(element => {
        switch (element.热点地区类型) {
          case '窗口地区': {
            element.image = '1'
            list0.push(element)
            break;
          }
          case '打卡地': {
            element.image = '2'
            list1.push(element)
            break;
          }
          case '重点商圈': {
            element.image = '3'
            list2.push(element)
            break;
          }
          case '红色教育场馆': {
            element.image = '4'
            list3.push(element)
            break;
          }
          case '保障酒店': {
            element.image = '5'
            list4.push(element)
            break;
          }
          case '展演场馆': {
            element.image = '6'
            list5.push(element)
            break;
          }
          case '大气污染防治重点点位': {
            element.image = '7'
            list6.push(element)
            break;
          }
          case '政府周边': {
            element.image = '8'
            list7.push(element)
            break;
          }
        }
      });
      this.Data.arrayHotpointForMap = [list0, list1, list2, list3, list4, list5, list6, list7]
      this.drawMapV()
    },
    async getHotpointList (ClientNo) {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/Vehicle/GetHotpointListRL?ClientNo=' + ClientNo
      const { data } = await this.$Http.get(url)
      data.forEach(element => {
        if (element.热点地区类型 === '窗口地区') {
          element.TYPE = '1'
        } else if (element.热点地区类型 === '打卡地') {
          element.TYPE = '2'
        } else if (element.热点地区类型 === '重点商圈') {
          element.TYPE = '3'
        } else if (element.热点地区类型 === '红色教育场馆') {
          element.TYPE = '4'
        } else if (element.热点地区类型 === '保障酒店') {
          element.TYPE = '5'
        } else if (element.热点地区类型 === '展演场馆') {
          element.TYPE = '6'
        } else if (element.热点地区类型 === '大气污染防治重点点位') {
          element.TYPE = '7'
        } else if (element.热点地区类型 === '政府周边') {
          element.TYPE = '8'
        }
      });
      this.Data.hotList = data;
      this.showHotList = true
    },
    async getQuestionList (ClientNo) {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/Vehicle/GetMatterpointListRL?ClientNo=' + ClientNo
      const { data } = await this.$Http.get(url)
      this.Data.questionList = data;
      this.isBJQuestionList = false
      this.showQuestionList = true
    },
    async getQuestionBJList (ClientNo) {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/Vehicle/GetMatterpointBJListRL?ClientNo=' + ClientNo
      const { data } = await this.$Http.get(url)
      this.Data.questionList = data;
      this.isBJQuestionList = true
      this.showQuestionList = true
    },
    async getQuestionRanking (ClientNo) {
      var url = 'http://111.160.78.62:9930/Cityscapeapi/Vehicle/GetMatterpointRankInfoRL?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.Data.questionRanking = data;
      this.showQuestionRanking = true
    },
    clickshowHotRanking () {
      this.showHotRanking = true
      this.getHotpointStatisticsRL()
    },
    // 显示标记点
    drawMapV () {
      //清空dataSetDic
      for (var key in this.MapV.dataSetDic) {
        this.MapV.dataSetDic[key].set([]);
      }
      //因为需要加载不同的图片，所以将车辆数据按车辆类型、是否在线分成不同数组this.Data.arrayForType
      this.Data.arrayHotpointForMap.forEach(arrayDataForSameIcon => {

        //如果数据中无数据，退出循环
        if (arrayDataForSameIcon.length == 0) {
          return;
        }
        // console.log(arrayDataForSameIcon[0].热点地区类型)
        const _self = this;

        let img = new Image();
        img.src = require('@/assets/img/marker/hotPoint/' + arrayDataForSameIcon[0].image + _self.isZoomChange + '.png')
        img.onload = function () {
          //循环加载同一张图片的车辆数据
          let arrayImage = arrayDataForSameIcon.map(v => {
            v.geometry = {
              type: 'Point',
              coordinates: [v.经度, v.纬度]
            }
            v.icon = img;
            v.text = v.热点地区名称;
            return v;
          })
          console.log('key')
          let key = arrayDataForSameIcon[0].热点地区类型 + _self.isZoomChange
          console.log(key)
          if (_self.MapV.dataSetDic.hasOwnProperty(key)) {

            _self.MapV.dataSetDic[key].set(arrayImage);

          } else {

            let optionsICON = {
              draw: 'icon',
              zIndex: 1000, // 层级
              width: 35, // 规定图像的宽度
              height: 35, // 规定图像的高度
              size: 50, // 规定图像的点击范围
              methods: {
                click: function (e) {
                  if (e) {
                    console.log(e.热点地区名称)
                    _self.isClickMarker = true
                    _self.addHotpointInfoWindow(e)
                  }
                }
              },
            }

            let optionsTEXT = {
              draw: 'text',
              size: 14,
              avoid: true, // 开启文本标注避让
              textBaseline: 'middle',
              offset: { // 文本便宜值
                x: 0,
                y: 30
              }
            }

            let dataSet = new mapv.DataSet(arrayImage);

            _self.MapV.dataSetDic[key] = dataSet;

            _self.MapV.iconMapvDic[key] = new mapv.baiduMapLayer(_self.map, dataSet, optionsICON)
            _self.MapV.textMapvDic[key] = new mapv.baiduMapLayer(_self.map, dataSet, optionsTEXT)


            // if (_self.MapV.iconMapvDic.hasOwnProperty(key1)) {
            //   if (_self.MapV.iconMapvDic.hasOwnProperty(key1)) {
            //   }
            // }
          }
          _self.mapOperationsList.forEach(element => {
            if (element.name + _self.isZoomChange === key) {
              console.log(element.name)
              if (!element.active) {
                //   _self.MapV.iconMapvDic[key].show()
                //   if (_self.isZoomChange == 'S') {
                //     _self.MapV.textMapvDic[key].hide()
                //   } else {
                //     _self.MapV.textMapvDic[key].show()
                //   }
                // } else {
                _self.MapV.iconMapvDic[key].hide()
                _self.MapV.textMapvDic[key].hide()

              }
            }
          });
          if (_self.isZoomChange == 'S') {
            _self.MapV.textMapvDic[key].hide()
          }
        }
      });
      // console.log('----------------------')
      // this.mapOperationsList.forEach(element => {
      //   var key1 = element.name+this.isZoomChange
      //         console.log(key1)
      //         if (element.active) {
      //           this.MapV.iconMapvDic[key1].show()
      //           if (this.isZoomChange == 'S') {
      //           this.MapV.textMapvDic[key1].hide()
      //           } else {
      //             this.MapV.textMapvDic[key1].show()
      //           }
      //         } else {
      //           this.MapV.iconMapvDic[key1].hide()
      //           this.MapV.textMapvDic[key1].hide()
      //         }
      //       });
    },
    addHotpointInfoWindow (e) {
      console.log(e)
      var opts = {
        width: 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: e.热点地区名称, // 信息窗口标题
      }
      var str = `<p style = "margin-bottom: 5px;" > 热点地区名称：${e.热点地区名称}</p>
                    <p style="margin-bottom: 5px;">热点地区类型：${e.热点地区类型}</p>
                    <p style="margin-bottom: 5px;">所属行政区划：${e.所属行政区划}</p>
      `
      var infoWindow = new BMap.InfoWindow(str, opts);  // 创建信息窗口对象 
      this.map.openInfoWindow(infoWindow, new BMap.Point(e.经度, e.纬度))
    },
    // 显示底部列表
    // showFooter () {
    //   this.hideFooter = false;
    //   eventBus.$emit('toShowFooter');
    // },
    // 仅显示头
    // onlyShowHeader () {
    //   // this.toHideWarningInfo();
    //   eventBus.$emit('toHideMapInfo');
    //   eventBus.$emit('toHideFooter');
    //   eventBus.$emit('toHideLegend');
    // },
    // 进入全屏
    requestFullScreen () {
      this.isFull = true;
      eventBus.$emit('contentToFullScreen');
      var de = document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }
    },
    // 退出全屏
    exitFullscreen () {
      this.isFull = false;
      eventBus.$emit('contentToDefaultScreen');
      var de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
    },
    formatterBJType (row, column, cellValue, index) {
      return '结案'
    },
    changeCursor (addState) {
      this.addState = addState
      if (addState === '0') {
        this.isFull = false;
        this.map.setDefaultCursor("auto");
      } else {
        this.isFull = true;
        this.map.setDefaultCursor("crosshair");
      }
    },
    // 打开热点地区编辑窗口
    handleHotpointRL (index, row) {
      this.formHeat = Object.assign({}, row);
      this.showEditHeatPoint = true;
    },
    //新增热点地区
    async saveHotpointRL () {
      let clientNO = this.districtData.filter(val => val.行政区划 == this.formHeat.ClientName)[0].CLIENT_NO
      this.$axios({
        url: 'Vehicle/AddHotpointRL',
        method: 'post',
        data: {
          NAME: this.formHeat.NAME,
          TYPE: this.formHeat.TYPE,
          CLIENT_NO: clientNO,
          LONGITUDE: this.formHeat.lng,
          LATITUDE: this.formHeat.lat
        },

      }).then((res) => {
        console.log(this.data)
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('新增成功');
          this.showAddHeatPoint = false
          this.getHotpointOnMap()
        } else {
          this.$message.error('新增失败');
        }
      })
    },
    //编辑热点地区
    async editHotpointRL () {
      this.$axios({
        url: 'Vehicle/UpdateHotpointRL',
        method: 'post',
        data: {
          ID: this.formHeat.ID,
          NAME: this.formHeat.热点地区名称,
          TYPE: this.formHeat.TYPE,
          LONGITUDE: this.formHeat.经度,
          LATITUDE: this.formHeat.纬度
        },

      }).then((res) => {
        if (res.data.IsSucess) {
          this.$message.success('编辑成功');
          this.showEditHeatPoint = false
          let clientNO = this.districtData.filter(val => val.行政区划 == this.formHeat.所属行政区划)[0].CLIENT_NO
          this.getHotpointList(clientNO)

        } else {
          this.$message.error('编辑失败');
        }
      })
    },
    // 删除热点地区
    async deleteHotpointRL (index, row) {
      const confirmResult = await this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        const params = {
          ID: row.ID,
        }
        const { data } = await this.$Http.get('Vehicle/DeleteHotpointRL', { params })
        if (data.IsSucess) {
          this.$message.success('删除成功')
          let clientNO = this.districtData.filter(val => val.行政区划 == row.所属行政区划)[0].CLIENT_NO
          this.getHotpointList(clientNO)
        } else {
          this.$message.error('删除失败');
        }
      } else {
        this.$message.info('取消删除')
      }

    },
    // 打开问题点位编辑窗口
    handleMatterpointRL (index, row) {
      this.formQuestion = Object.assign({}, row);
      this.showEditQuestionPoint = true;
    },
    //新增问题点位
    async saveMatterpointRL () {
      let clientNO = this.districtData.filter(val => val.行政区划 == this.formQuestion.ClientName)[0].CLIENT_NO
      this.$axios({
        url: 'Vehicle/AddMatterpointRL',
        method: 'post',
        data: {
          SYMBOL: this.formQuestion.SYMBOL,
          CLIENT_NO: clientNO,
          LONGITUDE: this.formQuestion.lng,
          LATITUDE: this.formQuestion.lat,
          DETAIL: this.formQuestion.DETAIL,
          PHOTO: this.WXFJUrl,
        },

      }).then((res) => {
        console.log(this.data)
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('新增成功');
          this.showAddQuestionPoint = false
        } else {
          this.$message.error('新增失败');
        }
      })
    },
    //编辑问题点位
    async editMatterpointRL () {
      let PATH = ''
      if (this.WXFJUrl === '') {
        //未做选择修改
        PATH = this.formQuestion.问题图片
      } else {
        PATH = this.WXFJUrl
      }
      this.$axios({
        url: 'Vehicle/UpdateMatterpointRL',
        method: 'post',
        data: {
          ID: this.formQuestion.ID,
          SYMBOL: this.formQuestion.问题名称,
          DETAIL: this.formQuestion.问题详细描述,
          LONGITUDE: this.formQuestion.经度,
          LATITUDE: this.formQuestion.纬度,
          PHOTO: PATH,
        },

      }).then((res) => {
        if (res.data.IsSucess) {
          this.$message.success('编辑成功');
          this.showEditQuestionPoint = false
          let clientNO = this.districtData.filter(val => val.行政区划 == this.formQuestion.所属行政区划)[0].CLIENT_NO
          this.getQuestionList(clientNO)
        } else {
          this.$message.error('编辑失败');
        }
      })
    },
    // 删除问题点位
    async deleteMatterpointRL (index, row) {
      const confirmResult = await this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        const params = {
          ID: row.ID,
        }
        const { data } = await this.$Http.get('Vehicle/DeleteMatterpointRL', { params })
        if (data.IsSucess) {
          this.$message.success('删除成功')
          let clientNO = this.districtData.filter(val => val.行政区划 == row.所属行政区划)[0].CLIENT_NO
          this.getQuestionList(clientNO)
        } else {
          this.$message.error('删除失败');
        }
      } else {
        this.$message.info('取消删除')
      }

    },
    // 结案问题点位
    async stateMatterpointRL (index, row) {
      const confirmResult = await this.$confirm('确定结案？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        const params = {
          ID: row.ID,
        }
        const { data } = await this.$Http.get('Vehicle/UpdateMatterpointStateRL', { params })
        if (data.IsSucess) {
          this.$message.success('结案成功')
          let clientNO = this.districtData.filter(val => val.行政区划 == row.所属行政区划)[0].CLIENT_NO
          this.getQuestionList(clientNO)
        } else {
          this.$message.error('结案失败');
        }
      } else {
        this.$message.info('取消结案')
      }

    },
    // 放大图片
    bigImage (row) {
      this.srcBig = row.问题图片
      this.showBigDialogVisible = true
    },
    handleClose () {
      this.showBigDialogVisible = false;
    },
    // 限制用户上传的图片格式和大小
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 点击上传维修凭证按钮
    clickWXFJ () {
      this.$refs.WXFJFile.click();

    },
    changeWXFJ () {
      this.afterRead(this.$refs.WXFJFile.files[0]);
      this.$refs.WXFJFile.value = null; // 移除文件，可以保证上传同样的文件时，也会触发change事件
    },
    afterRead (file) {
      return new Promise((resolve, reject) => {
        // 此时可以自行将文件上传至服务器
        const that = this
        let client = new OSS(this.dataObj)
        const fileName = file.name
        //定义唯一的文件名，打印出来的uid其实就是时间戳
        //client 是第一步中的 client
        client
          .multipartUpload(fileName, file)
          .then((result) => {
            //下面是如果对返回结果再进行处理，根据项目需要
            // console.log(result)
            that.WXFJUrl =
              'http://' +
              result.bucket +
              '.' +
              that.baseAli +
              '/' +
              result.name
            console.log(that.tempUrl)
            resolve()
          })
          .catch((err) => {
            console.log('err:', err)
            reject()
          })
      })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    openFolder () {
      if (this.QuestionPhoto.imageList.length > 0) {
        this.$message.warning(`最多上传一张图片`);
      } else {
        this.$refs.PicFile.click();
      }
    },
    uploadPic () {
      this.readPic(this.$refs.PicFile.files[0]);
      this.$refs.PicFile.value = null; // 移除文件，可以保证上传同样的文件时，也会触发change事件
    },
    readPic (file) {
      return new Promise((resolve, reject) => {
        // 此时可以自行将文件上传至服务器
        const that = this
        let client = new OSS(this.dataObj)
        const fileName = file.name
        //定义唯一的文件名，打印出来的uid其实就是时间戳
        //client 是第一步中的 client
        client
          .multipartUpload(fileName, file)
          .then((result) => {
            //下面是如果对返回结果再进行处理，根据项目需要
            // console.log(result)
            var url =
              'https://' +
              result.bucket +
              '.' +
              that.baseAli +
              '/' +
              result.name
            console.log(url)
            that.completeUploadPic(result.name, url)
            resolve()
          })
          .catch((err) => {
            console.log('err:', err)
            reject()
          })
      })
    },
    completeUploadPic (name, url) {
      this.QuestionPhoto.imageList.push({ name: name, url: url })
    },
    // 删除图片
    handleRemovePic (file, fileList, index) {
      // console.log('删前')
      // console.log(this.QuestionPhoto.imageList)
      this.QuestionPhoto.imageList.splice(this.QuestionPhoto.imageList.indexOf(file), 1);
      // console.log('删后')
      // console.log(this.QuestionPhoto.imageList)
    },
    // 放大图片
    handlePreviewPic (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 关闭图片编辑窗口
    handleClosePic () {
      this.$refs.PicUpload.clearFiles()
    },
    // 关闭图片预览窗口
    handleClosePicPreview () {
      this.$nextTick(() => {
        let domImageMask = document.querySelector(".el-image-viewer__mask");
        if (domImageMask) {
          domImageMask.addEventListener("click", () => {
            document.querySelector(".el-image-viewer__close").click();
          })
        }
      })
    },
    // 地图信息tab切换
    // changeMapInfoTabValue (index) {
    //   if ((index === this.mapInfoTabValue) && this.showMapInfo) {
    //     this.showMapInfo = false;
    //     this.mapInfoTabValue = '';
    //   } else {
    //     this.showMapInfo = true;
    //     this.mapInfoTabValue = index;
    //   }
    // },
    // 改变右上方显示隐藏图标
    changeOperationValue (item, index) {
      item.active = !item.active
      switch (index) {
        case 0:
          this.actionMapvKey(item.active, '窗口地区')
          break;
        case 1:
          this.actionMapvKey(item.active, '打卡地')
          break;
        case 2:
          this.actionMapvKey(item.active, '重点商圈')
          break;
        case 3:
          this.actionMapvKey(item.active, '红色教育场馆')
          break;
        case 4:
          this.actionMapvKey(item.active, '保障酒店')
          break;
        case 5:
          this.actionMapvKey(item.active, '展演场馆')
          break;
        case 6:
          this.actionMapvKey(item.active, '大气污染防治重点点位')
          break;
        case 7:
          this.actionMapvKey(item.active, '政府周边')
          break;
        default:
          break;
      }
    },
    actionMapvKey (active, key) {
      if (active) {
        this.MapV.iconMapvDic[key + this.isZoomChange].show()
        if (this.isZoomChange == 'B') {
          this.MapV.textMapvDic[key + 'B'].show()
        }
      } else {
        this.MapV.iconMapvDic[key + this.isZoomChange].hide()
        if (this.isZoomChange == 'B') {
          this.MapV.textMapvDic[key + 'B'].hide()
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
#allmap {
  position: relative;
  // height: calc(100% - 40px);
  height: 100%;
}
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
#map {
  height: 100%;
}
.person_top {
  width: 150px;
  height: 130px;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: #b2dfee;
  border: 1px solid #ccc;
  p {
    height: 30px;
    // text-align: center;
    padding-left: 5px;
    padding-left: 10px;
    color: #333;
    span:first-child {
      text-align: center;
      padding-top: 14px;
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 5px;
      vertical-align: middle;
      img {
        // background-size: 30px 30px;
        height: 30px;
      }
    }
  }
}
.person_legend {
  width: 400px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px 0 10px;
  border-radius: 5px;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
    margin-bottom: 5px;
    i {
      float: right;
      cursor: pointer;
      &:before {
        color: #666;
      }
    }
  }
  p {
    // text-align: center;
    color: #333;
    float: left;
    width: 20%;
    margin-bottom: 20px;
    span {
      display: block;
      text-align: center;
      &:first-child {
        img {
          // background-size: 30px 30px;
          height: 40px;
        }
      }
    }
  }
}
.status_legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0 10px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  .public {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    margin-right: 2px;
  }
  .online {
    background-color: #1afa29;
  }
  .outline {
    background-color: blue;
  }
  .warning {
    background-color: red;
  }
}
.mini_legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #007acc;
  font-size: 14px;
  &.right {
    right: 10px;
    left: auto;
  }
}
.map-infos-wrap {
  position: absolute;
  left: 10px;
  top: 30px;
  height: 120px;
  .map-infos {
    background: rgba(255, 255, 255, 0.9);
    height: 500px;
    width: 300px;
    border-radius: 5px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
    h3 {
      font-size: 15px;
      line-height: 26px;
      margin-left: 10px;
      i {
        float: right;
        font-style: normal;
        color: #666;
        font-size: 12px;
      }
    }
    .item-wrap {
      display: flex;
      margin-bottom: 20px;
      .item-con {
        flex: 1;
        text-align: center;
        h2 {
          margin-top: 10px;
          line-height: 30px;
          font-size: 20px;
        }
        span {
          font-size: 13px;
          color: #666;
        }
      }
    }
    .icon-wrap {
      margin: 10px 10px 10px 0;
      .icon-con {
        width: 33.33%;
        float: left;
        text-align: center;
        margin: 15px 0;
        position: relative;
        i {
          font-size: 20px;
          display: block;
          margin-bottom: 5px;
          color: #333;
        }
        .el-tag.el-tag--mini {
          position: absolute;
          right: 0;
          top: -8px;
          height: 15px;
          line-height: 15px;
          border-color: #e1dada;
          background: #e1dada;
          color: #666;
        }
        span {
          font-family: STHeiti;
          font-size: 14px;
          color: rgb(34, 34, 34);
        }
        &.hasColor {
          i {
            color: #007acc;
          }
          .el-tag.el-tag--mini {
            font-size: 14px;
            border-color: #007acc;
            background: #007acc;
            color: #fff;
          }
        }
      }
    }
    .map-checkboxs {
      margin-top: 10px;
      p {
        line-height: 30px;
      }
    }
    /deep/.el-progress-bar__outer {
      background: #d8d8d8;
    }
  }
  .info-tabs {
    position: absolute;
    right: -30px;
    top: 20px;
    background: rgba(255, 255, 255, 0.9);
    width: 30px;
    border-radius: 0 3px 3px 0;
    overflow: hidden;
    a {
      display: block;
      padding: 3px 3px 1px 3px;
      text-align: center;
      line-height: 24px;
      cursor: pointer;
      &.active {
        background: #007acc;
        i {
          color: #fff;
        }
      }
    }
  }
  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 6px;
  }
}
/deep/.el-table.card-table {
  margin-top: 10px;
  background: none;
  thead,
  tbody {
    color: #333;
  }
  tr,
  th {
    background: none !important;
  }
  th div,
  td div {
    font-size: 14px;
  }
  tr:nth-child(2n) {
    background: none;
  }
  tr:hover > td {
    background: none !important;
  }
}
.map-operation {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 32px;
  top: 10px;
  border-radius: 5px;
  ul {
    li {
      list-style: none;
      float: left;
      color: #ecf0f3;
      background: #b2bbbe;
      font-size: 16px;
      padding: 5px 12px;
      position: relative;
      cursor: pointer;
      border-radius: 2px;
      i {
        margin-right: 3px;
        margin-bottom: 3px;
        &:before {
          font-size: inherit;
          color: inherit;
        }
      }
      &::before {
        display: block;
        content: '';
        width: 1px;
        height: 13px;
        background: #dcdfe6;
        position: absolute;
        right: 0;
        top: 8px;
      }
      &:last-child {
        &::before {
          display: none;
        }
      }
      &.active {
        color: #fff;
        background: #007acc;
        border-radius: 2px;
      }
    }
  }
}
.row_box {
  width: 120px;
  // height: 130px;
  color: #666;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  position: fixed;
  span {
    display: block;
    text-align: center;
    line-height: 26px;
    cursor: default;
    &:hover {
      color: #fff;
      background-color: #409eff;
    }
  }
}
.cursor {
  cursor: url(http://111.160.78.62:4485/图钉.png), auto;
}
.expand .el-form-item {
  width: 100%;
  color: rgb(104, 150, 242);
}
</style>
